<template>
  <div>
      <jxf-titletip :title="title"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <jxf-Date :startTime.sync="searchInfo.startTime" :endTime.sync="searchInfo.endTime"
                    label="提出时间：" ></jxf-Date>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
        </div>
        <jxf-table class="" :table="tableInfo">
          <template slot="content" slot-scope="scope">
            <span v-if="scope.row.content.length <= 20">{{scope.row.content}}</span>
            <el-tooltip v-else placement="top">
              <div slot="content">{{scope.row.content}}</div>
              <span>{{scope.row.content.substring(0,20)}}...</span>
            </el-tooltip>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row)">查看详情</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    <FeedbackDetail ref="FeedbackDetail" :isShowDetail.sync="isShowDetail"></FeedbackDetail>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'
  import FeedbackDetail from './components/FeedbackDetail'
  export default {
    name: "Feedback",
    components: {FeedbackDetail},
    data() {
      return {
        title: "意见反馈",
        searchInfoBack: {
          startTime: "",
          endTime: ""
        },
        searchInfo: {
          startTime: "",
          endTime: ""
        },
        tableInfo: {},
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        isShowDetail:false
      }
    },
    methods: {
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '提出时间',
              width: "160",
              prop: 'createTime'
            },
            {
              id: '2',
              label: '提出人',
              prop: 'account'
            },
            {
              id: '3',
              label: '提出角色',
              prop: 'roleName'
            },
            {
              id: '4',
              minWidth: '120',
              label: '意见反馈内容',
              show: 'template',
              prop: 'content'
            },
            {
              id: '5',
              label: '联系方式',
              prop: 'telphone',
              width: "120",
            },
            {
              id: '9',
              label: '操作',
              show: 'template',
              width: "100",
              prop: 'operation',
              fixed: "right"
            }
          ],
          data: []
        }
      },
      getList() {
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.post(apis.operate.feedbackList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      // 列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            id: item.id,
            createTime: item.createTime,
            account: item.account,
            roleName: item.roleId === 3 ? '供应商' : item.roleId === 4 ? '采购商' : '',
            roleId: item.roleId,
            content: item.content,
            telphone: item.telphone
          }
        })
      },
      // 查看详情
      showDetail(row) {
        this.isShowDetail = true
        this.$refs.FeedbackDetail.setInfo(row)
      },
      onSearch() {
        this.currentPage = 1
        this.getList()
      },
      // 搜索表单重置
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.searchInfo = {...this.searchInfoBack}
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.searchInfo = {...this.searchInfoBack}
        this.getList()
      }
    },
    created() {
      this.init()
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>

</style>
